<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌列表案例</title>
  <script src="../Vue.js"></script>
  //复选框绑定到一个数组上面,实现多选
</head>
<body>

<div id="app">
  <div>添加商品</div>
<div>
  <label>
    id:
    <input type="text"  v-model="id">
  </label>

  <label>
    Name:
    <input type="text" v-model="name" >
  </label>
<!--事件绑定后的方法后加括号，可以用来传递参数-->
  <button @click="add()" >
    添加
  </button>
  <label>
    搜索名称关键字:
    <input type="text" v-model="keyword">
  </label>
</div>

<table>
  <thead>
      <tr>
        <th>
          <input type="checkbox" >全选

        </th>
        <th>id</th>
        <th>name</th>
        <th>time</th>
        <th>operate</th>
      </tr>
  </thead>
  <tbody>

<!--  将for中要循环的数组 变为一个方法，实现显示的数据 与 搜索的关键字联系-->
      <tr v-for="item in search(keyword)" :key="item.id">
        <td>
          <input type="checkbox" >
        </td>
        <td>{{item.id}}</td>
        <td>--{{item.name}}--</td>
        <td>{{item.time}}</td>
        <td ><a href="" @click.Prevent="delet(item.id)">删除</a></td>
      </tr>
  </tbody>
</table>
</div>

<script>

  new Vue({
    el:'#app',
    data:{
      id:'',
      name: '',
      keyword:'',
      list:[
        {id:1 , name:'小明' , time:new Date()},
        {id:2 , name:'小红' , time:new Date()},
        {id:3 , name:'小芳' , time:new Date()},
      ]
    },
    methods:{
      add(){
        this.list.push({id:this.id  , name:this.name , time:new Date()});
        this.id = '';
        this.name = '';

      },
      delet(id){

        // this.list.some((item,i) => {
        //   if (item.id == id){
        //     this.list.splice(i,1)
        //     return true;
        //   }
        // })


        var  index = this.list.findIndex(item => {
          if (item.id == id) {
            return true;
          }
        });
        this.list.splice(index,1)
      },
      search(keyword){

      //     var newList = [];
      // //  遍历数组  找到与关键字匹配的数据
      //   this.list.forEach(item => {
      //     if (item.name.indexOf(keyword) != -1){
      //       newList.push(item);
      //     }
      //   })
      //   return newList;

        //直接
        return  this.list.filter(item => {

          //string.includes（‘要包含的关键字’）  ，如果包含 返回true 否则返回false
          if(item.name.includes(keyword)){
              return item;
          }
        });


      }

    }

  })
</script>
</body>
</html>
